<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
	 <!-- 写死 src，不能动态改变 -->
	 <img src="images/vue.png" />
	 <!-- 使用 v-bind 指令，可动态改变 src -->
	 <img v-bind:src="imageSrc" />
	 <!-- 简写写法 -->
	 <img :src="imageSrc" />
	 <!-- 绑定对象，则属性值为 true 的添加，false 的不添加 -->
	 <p v-bind:class="{ classA: hasA, classB: hasB }">段落 1</p>
		 <!-- 绑定数组，则数组中的样式都会添加 -->
		 <p v-bind:class="classArray">段落 2</p>
		 </div>
		 <script src=" https://cdn.jsdelivr.net/npm/vue@2"></script>
		1<script>
		 const app = new Vue({
		 el: "#app",
		 data: {
		 imageSrc: 'images/vue.png',
		 hasA: false,
		 hasB: true,
		2classArray: ['classA', 'classC']
		 }
		 });
		 setTimeout(function() {
		 // 3 秒后修改图片属性值，查看图片是不是变化了
		 app.imageSrc = 'images/react.png';
		 },3000);
		 </script>
	</body>
</html>
